import React, { useState } from 'react'
import Header from './components/Header'
import Content from './components/Content'
import Footer from './components/Footer'
import TodoList from './components/TodoList'
import Demo from './components/Demo'
import Discount from './components/Discount'
import Life from './components/Life'
import LifeFn from './components/LifeFn'
import Shopping from './components/Shopping'

function App() {
  const [compName,setCompName] = useState("tabA")
  const showCom = ()=>{
    switch(compName){
      case "tabA":return <Discount></Discount>
      case "tabB":return <Life></Life>
      case "tabC":return <LifeFn></LifeFn>
      case "tabD":return <Shopping></Shopping>
    }
  }
  return (
    <div>
      <div>
        <button onClick={()=>setCompName("tabA")}>优惠券</button>
        <button onClick={()=>setCompName("tabB")}>生命周期</button>
        <button onClick={()=>setCompName("tabC")}>生命周期</button>
        <button onClick={()=>setCompName("tabD")}>购物车</button>
      </div>
      {showCom()}
      {/* <TodoList></TodoList> */}
      {/* <Demo></Demo> */}
      {/* <Discount></Discount> */}
      {/* <Life></Life> */}
      {/* <Header></Header> */}
      {/* <Content></Content> */}
      {/* <Footer></Footer> */}
    </div>
  )
}

export default App